<template>
    <div>
        <el-table
            :data="disCounts"
            style="width: 100%">
                <el-table-column
                        prop="coupon.name"
                        label="名称"
                        width="150">
                </el-table-column>
            <el-table-column
                    prop="coupon.value"
                    label="普通金额"
                    width="80">
            </el-table-column>
                <el-table-column
                        prop="coupon.discount"
                        label="折扣"
                        width="80">
                </el-table-column>
                <el-table-column label="满减" width="150">
                    <template slot-scope="scope">
                        满 {{ scope.row.coupon.originCondition }} 减 {{ scope.row.coupon.denominations }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="coupon.startTime"
                        label="开始时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="coupon.endTime"
                        label="结束时间"
                        width="180">
                </el-table-column>
                <el-table-column label="获取路径" width="150">
                    <template slot-scope="scope">
                         {{ scope.row.getType === 0 ? '后台赠送':'主动领取' }}
                    </template>
                </el-table-column>
                <el-table-column label="获取路径" width="150">
                    <template slot-scope="scope">
                        {{ scope.row.useStatus === 0 ? '已使用': scope.row.useStatus === 1 ? '未使用': '已过期' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="coupon.description"
                        label="描述">
                </el-table-column>
                <el-table-column label="满减" width="200">
                    <template slot-scope="scope">
<!--                        <el-button type="primary" plain size="mini" @click="updateCounts(scope.row)">修改</el-button>-->
                        <el-button type="danger" plain size="mini" @click="deleteCounts(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <el-divider/>
        <el-form :inline="true" :model="disCountsForm"  ref="disCountsForm" label-width="80px" class="demo-dynamic">
<!--            <el-form-item label="优惠名称">-->
<!--                <el-input v-model="disCountsForm.countsName"/>-->
<!--            </el-form-item>-->
            <el-form-item label="所属模块" :label-width="300">
                <el-select
                        v-model="disCountsForm.couponId"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="所属模块">
                    <el-option v-for="item in coupon"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                        {{item.name}} - {{item.description}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="优惠区间">
                <el-button @click="updateOk" type="primary" v-if="!flag" size="mini" plain>修改</el-button>
                <el-button @click="insert" type="success" v-if="flag" size="mini" plain>添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "disCounts",
        props: ['clientId'],
        data() {
            return {
                disCounts:[],
                disCountsForm:{},
                flag :true,
                coupon:{},
            };
        },

        created() {
            this.getByHome();
        },
        watch: {
            // 监听数据变化
            clientId: {
                handler: function(o,u) {
                    //这时候 o = 岑先生、u = 不认识
                    console.log('数据更新', o, u)
                    this.getByHome();
                },
                deep: true
            }
        },
        methods: {
            getByHome(){
                this.$http.get(`coupon/api/couponHistory/client/${this.clientId}`).then(resp =>{
                    this.disCounts = resp.data.data;
                    console.log(this.disCounts)
                })
                this.$http.get(`/coupon/api/findAll`).then(resp =>{
                    this.coupon = resp.data.data;
                    console.log(this.disCounts)
                })

            },
            insert() {
                this.disCountsForm.clientId = this.clientId;
                console.log(this.disCountsForm)
                this.$http.post('/coupon/api/couponHistory',this.disCountsForm).then(resp =>{
                    if (resp.data.code === 200){
                        this.$message({
                            type:'success',
                            message:'添加成功！'
                        })
                        this.getByHome();
                        this.disCountsForm = {}
                    }
                })
            },
            deleteCounts(id){
                var idList = [id]
                this.$http.delete("/counts",{data: idList}).then((response) => {
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    // 刷新页面
                    this.getByHome();
                })
            },
            updateCounts(row){
                this.flag = false;
                this.disCountsForm = row;
            },
            updateOk(){
                this.$http.put('/counts',this.disCountsForm).then(resp =>{
                    if (resp.data.code === 200){
                        this.$message({
                            type:'success',
                            message:'修改成功！'
                        })
                        this.getByHome();
                        this.disCountsForm = {}
                        this.flag = true;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
